
<template>
  <div class="app-container">
    <el-card>
      <!-- <div slot="header">
        <span>业务线信息</span>
      </div> -->
      <el-descriptions direction="vertical" :column="3" border>
        <el-descriptions-item label="名称">{{ detail.name }}</el-descriptions-item>
        <el-descriptions-item label="Code">{{ detail.code }}</el-descriptions-item>
        <el-descriptions-item label="业务线">{{ detail.business_name }}</el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-card>
      <div slot="header">
        <span>环境配置</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="addRowVisible">添加</el-button>

      </div>
      <el-table
        :data="tableData"
        style="width: 100%;margin-bottom: 20px;"
        row-key="path"
        border
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      >
        <el-table-column prop="env_name" label="环境名" />
        <el-table-column prop="kube_name" label="集群名" />
        <el-table-column prop="namespace" label="命名空间" />
        <el-table-column prop="capacity_name" label="计算方案" />
        <el-table-column prop="template_name" label="YAML" />
        <el-table-column fixed="right" label="操作" width="250">
          <template #default="scope">
            <el-button size="small" @click="editRowVisible(scope.row)">编辑</el-button>
            <!-- <el-button size="small" @click="dialogYAMLFormVisible = true">编辑YAML</el-button> -->
            <el-button type="danger" size="small" @click="delRowHandle(scope.row)">删除</el-button>

          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          :page-sizes="[10, 20, 50, 100]"
          :page-size="tablePageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableTotal"
          prev-text="上一页"
          next-text="下一页"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <el-dialog :visible.sync="dialogFormVisible" title="新增">
      <el-form :model="form" style="width: 50%">
        <!-- <el-form-item label="项目" :label-width="formLabelWidth" hidden>
          <el-input v-model="form.project_id" />
        </el-form-item>
        <el-form-item label="业务线" :label-width="formLabelWidth" hidden>
          <el-input v-model="form.business_id" />
        </el-form-item> -->
        <el-form-item label="环境" :label-width="formLabelWidth" required>
          <el-select v-model="form.env_id" placeholder="请选择">
            <el-option
              v-for="item in envs"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="YAML模板" :label-width="formLabelWidth">
          <el-select v-model="form.template_id" placeholder="请选择">
            <el-option
              v-for="item in yamltemplatelist"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="计算方案" :label-width="formLabelWidth">
          <el-select v-model="form.capacity_id" placeholder="请选择">
            <el-option
              v-for="item in capacitylist"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-divider content-position="left">以下配置未配置将继承业务线配置</el-divider>
        <el-form-item label="集群" :label-width="formLabelWidth">
          <el-select v-model="form.kube_id" placeholder="请选择">
            <el-option
              v-for="item in kubes"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="命名空间" :label-width="formLabelWidth">
          <el-input v-model="form.namespace" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addRowHandle">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- YAML 编辑弹窗 -->
    <el-dialog title="关联YAML" :visible.sync="dialogYAMLFormVisible">
      <el-form :model="yamlform" class="demo-form-inline">
        <el-form-item label="YAML模板" :label-width="formLabelWidth">
          <el-select v-model="yamlform.deploytemplate" placeholder="请选择YAML模板">
            <el-option
              v-for="item in deploytemplatelist"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
          <el-input v-model="yamlform.yaml" type="textarea" rows="25" readonly />
        </el-form-item>
        <el-form-item
          v-for="(envparam, index) in yamlform.envparams"
          :key="envparam.key"
          :label="'环境参数' + index"
          :prop="'yamlform.envparams.' + index + '.value'"
          :rules="{
            required: true, message: '环境变量不能为空', trigger: 'blur'
          }"
          :label-width="formLabelWidth"
        >
          <el-col :span="8">
            <el-input v-model="envparam.key" />
          </el-col>
          <el-col :span="0.1">=</el-col>
          <el-col :span="8">
            <el-input v-model="envparam.value" />
          </el-col>
          <el-col :span="2">
            <el-button @click.prevent="removeEnvParam(envparam)">删除</el-button>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addEnvParam">新增环境参数</el-button>
        <el-button @click="dialogYAMLFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addRowHandle">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getList, addRow, delRow, editRow } from '@/api/setting/lob'
import { getList as getEnv } from '@/api/resource/env'
import { getList as getKube } from '@/api/resource/kube'
import { getList as getCapacity } from '@/api/setting/capacity'
import { getList as getYamlTemplate } from '@/api/setting/yamltemplate'
import { getRow as getDetail } from '@/api/resource/project'
export default {
  data() {
    return {
      tableData: [],
      tablePageSize: 10,
      tablePage: 1,
      tableTotal: 0,
      listLoading: true,
      searchParam: { project_id: this.$route.query.id },
      dialogFormVisible: false,
      form: {},
      formLabelWidth: '120px',
      envs: [],
      kubes: [],
      capacitylist: [],
      yamltemplatelist: [],
      dialogYAMLFormVisible: false,
      yamlform: {
        deploytemplate: '',
        yaml: '',
        envparams: []
      },
      deploytemplatelist: [],
      envparams: [],
      detail: {}
    }
  },
  created() {
    this.fetchData()
    this.fetchSelectData()
  },
  methods: {
    initform() {
      this.form = {
        project_id: this.$route.query.id,
        business_id: this.$route.query.business }
    },
    fetchData() {
      this.fetchDetail()
      this.listLoading = true
      const params = Object.assign(this.searchParam, { 'page': this.tablePage, 'page_size': this.tablePageSize })
      getList(params).then(response => {
        this.tableData = response.data
        this.tableTotal = response.total
        this.listLoading = false
      })
    },
    fetchDetail() {
      getDetail(this.$route.query.id).then(response => {
        this.detail = response
      })
    },
    fetchSelectData() {
      getEnv().then(response => {
        this.envs = response.data
      })
      getKube().then(response => {
        this.kubes = response.data
      })
      getCapacity().then(response => {
        this.capacitylist = response.data
      })
      getYamlTemplate().then(response => {
        this.yamltemplatelist = response.data
      })
    },
    handleCurrentChange(page) {
      this.tablePage = page
      console.log(page, this.tablePageSize)
      this.fetchData()
    },
    handleSizeChange(pagesize) {
      this.tablePageSize = pagesize
      this.fetchData()
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    addRowVisible() {
      // 解决form缓存问题
      this.initform()
      this.dialogFormVisible = true
    },
    editRowVisible(row) {
      this.form = Object.assign({}, row)
      this.dialogFormVisible = true
    },
    delRowHandle(row) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // 执行调用删除接口
          delRow({ id: row.id }).then(response => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.fetchData()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    addRowHandle() {
      this.dialogFormVisible = false
      console.log(this.form.id)
      if (this.form.id !== undefined) {
        editRow(this.form.id, this.form).then(response => {
          this.$message({
            type: 'success',
            message: '编辑成功'
          })
          this.fetchData()
        })
      } else {
        addRow(this.form).then(response => {
          this.$message({
            type: 'success',
            message: '添加成功'
          })
          this.fetchData()
        })
      }
    },

    // YAML 弹窗
    removeEnvParam(item) {
      var index = this.yamlform.envparams.indexOf(item)
      if (index !== -1) {
        this.yamlform.envparams.splice(index, 1)
      }
    },
    addEnvParam() {
      this.yamlform.envparams.push({
        value: '',
        key: ''
      })
    }
  }
}
</script>

<style>

</style>
